<template>
  <div class="originality-creative">
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1 v-text="titleText"></h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="breadcrumb">
        <a-breadcrumb :routes="routes">
          <template slot="itemRender" slot-scope="{route, params, routes}">
            <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
            <router-link v-else :to="`${route.path}`">{{route.breadcrumbName}}</router-link>
          </template>
        </a-breadcrumb>
      </div>

      <div class="portlet">
        <a-spin :spinning="spinning" :tip="$t('pro.public.loading')">
          <a-form class="conditions grid" :form="form" layout="vertical">
            <div class="grid-item">
              <div class="grid-item-main">
                <a-form-item :label="$t('pro.EditCreatives.CreativeAdName')">
                  <a-input
                    :placeholder="$t('pro.EditCreatives.CreativeAdNameTip')"
                    v-decorator="['creative.name',{
                        rules: [{ required: true, message: $t('pro.EditCreatives.CreativeAdNameMess') }]
                      }]"
                  />
                </a-form-item>
                <a-form-item>
                  <span slot="label">
                    {{ $t('pro.EditCreatives.MediaType') }}&nbsp;
                    <a-tooltip :title="$t('pro.formItem.creativeType')">
                      <a-icon type="question-circle-o" />
                    </a-tooltip>
                  </span>
                    <!--1111-->
                  <a-select
                    showSearch
                    :placeholder="$t('pro.EditCreatives.SelectPerson')"
                    optionFilterProp="children"
                    @change="changeMediaType"
                    :disabled="creativeTypeDisabled"
                    :filterOption="filterOption"
                    v-decorator="['creative.type',{initialValue: mediaType}]"
                  >
                    <a-select-option value="banners">{{$t('pro.EditCreatives.BannerAd')}}</a-select-option>
                    <a-select-option value="bannerVideos">{{$t('pro.EditCreatives.VideoAd')}}</a-select-option>
                    <a-select-option value="nativeAd">{{$t('pro.EditCreatives.nativeAd')}}</a-select-option>

                    <template v-if="false">
                      <a-select-option value="bannerVideos">{{$t('pro.EditCreatives.InBannerVideoAd')}}</a-select-option>
                      <a-select-option value="nativeAd">{{$t('pro.EditCreatives.NativeAd')}}</a-select-option>
                      <a-select-option value="pop_under">{{$t('pro.EditCreatives.PopUnder')}}</a-select-option>
                    </template>
                  </a-select>
                </a-form-item>
                <!--交易-->
                <!--<a-form-item :label="$t('pro.EditCreatives.Deals')">
                                    <a-input
                                            v-decorator="['creative.deals']"
                                    />
                </a-form-item>-->
                <div class="dsp-form-group">
                  <a-form-item :label="$t('pro.EditCreatives.BidPrice')">
                    <a-input-number
                      style="width: 150px"
                      @keydown="stopKeys"
                      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                      :min="0"
                      :precision="2"
                      v-decorator="['creative.bidEcpm',
                                            {
                        rules: [{ required: true, message: $t('pro.EditCreatives.CPMMess')},{type:'number',message:$t('pro.Editcampaigns.NumberMess')}]
                      },{initialValue: '1'}]"
                    />
                  </a-form-item>
                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.TotalValue') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.advZJ')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-input-number
                      style="width: 150px"
                      @change="handleBudget"
                      @keydown="stopKeys"
                      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                      :min="0"
                      :precision="2"
                      v-decorator="['creative.totalBasketValue',                                                          {rules:[{validator: validateSum},{type:'number',message:$t('pro.Editcampaigns.NumberMess')}]}]"
                    />
                  </a-form-item>
                </div>
                <div class="dsp-form-group">
                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.Dailybudget') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.advMeiTian')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-input-number
                      style="width: 150px"
                      @change="handleDayBudget"
                      @keydown="stopKeys"
                      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                      :min="0"
                      :precision="2"
                      v-decorator="['creative.dailyBudget',{rules:[{type:'number',message:$t('pro.Editcampaigns.NumberMess')},{
                validator: validateDailyCap
              }]}]"
                    />
                  </a-form-item>
                  <a-form-item :label="$t('pro.EditCreatives.Hourlybudget')">
                    <a-input-number
                      style="width: 150px"
                      @keydown="stopKeys"
                      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                      :min="0"
                      :precision="2"
                      v-decorator="['creative.hourlyBudget',{rules:[{type:'number',message:$t('pro.Editcampaigns.NumberMess')},{
                validator: validateHourlyCap
              }]}]"
                    />
                  </a-form-item>
                </div>
                <!--规格频率-->
                <a-form-item>
                  <span slot="label">
                    {{ $t('pro.EditCreatives.Frequencyspec') }}&nbsp;
                    <a-tooltip :title="$t('pro.formItem.fbl')">
                      <a-icon type="question-circle-o" />
                    </a-tooltip>
                  </span>

                  <!--111 <a-auto-complete
                    v-decorator="['creative.frequencySpec']"
                    :dataSource="frequencyspecList.text"
                    :filterOption="filterOption"
                  />-->

                  <a-radio-group v-decorator="['creative.frequencySpec',{initialValue: 'user.id'}]">
                    <a-radio-button value="user.id">
                      {{ $t('pro.Editcampaigns.frequencys')[0] }}
                    </a-radio-button>
                    <a-radio-button value="device.ip">
                      {{ $t('pro.Editcampaigns.frequencys')[1] }}
                    </a-radio-button>
                  </a-radio-group>


                </a-form-item>
                <!--频率计数/频率到期时间-->
                <a-form-item :label="$t('pro.EditCreatives.Frequencycount')">
                  <div style="display: grid;grid-template-columns: 1fr 0.5fr 0.1fr 1fr 0.5fr;">
                    <a-input-number
                      style="width: 100%"
                      :min="0"
                      :precision="0"
                      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                      v-decorator="['creative.frequencyCount']"
                    ></a-input-number>
                    <span class="minutes" v-text="$t('pro.EditCreatives.individual')"></span>
                    <span style="font-size: 20px;line-height: 33px;font-weight: bold;width: 10px">/</span>
                    <a-input-number
                      style="width: auto"
                      :min="0"
                      :precision="0"
                      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                      v-decorator="['creative.frequencyExpire']"
                    ></a-input-number>
                    <span class="minutes" v-text="$t('pro.EditCreatives.minutes')"></span>
                  </div>
                </a-form-item>
                <!--规则-->
                <!-- <a-form-item :label="$t('pro.Editcampaigns.rules')">
                                     <a-select
                                         mode="multiple"
                                         style="width: 100%"
                                         :tokenSeparators="[',']"
                                         @change="handleChange"
                                         v-decorator="['creative.rtbStandardIds']"
                                     >
                                         <a-select-option
                                                 v-for="rules in rulesArr"
                                                 :value="rules.id"
                                                 :key="rules.id"
                                         >{{ rules.name }}</a-select-option>
                                     </a-select>
                </a-form-item>-->
              </div>
            </div>

            <div class="grid-item">
              <div class="grid-item-main">

                <!-- 横幅广告 -->
                <template v-if="mediaType =='banners'">
                  <!-- 图片来源 $t('pro.EditCreatives.ImageSelect')-->
                  <a-form-item :label="''" style="margin-top: 8px">
                    <a-radio-group
                      v-decorator="['creative.banners.imageSource',{ initialValue: bannerPreview.imageSource ? bannerPreview.imageSource : 'image_select_library'},{rules: [{ required: true, message: $t('pro.EditCreatives.ImageURLMess') }]},]"
                      @change="targetEvent"
                    >
                      <a-radio value="image_select_library">{{$t('pro.EditCreatives.ImageLibrary')}}</a-radio>
                      <a-radio value="image_select_url">{{$t('pro.EditCreatives.ImageURL')}}</a-radio>
                    </a-radio-group>
                  </a-form-item>

                  <a-form-item>
                    <!-- 图像库 -->
                    <a-select
                      v-show="imageSelectFromLibrary"
                      :placeholder="$t('pro.EditCreatives.Selectimage')"
                      v-decorator="['creative.banners.iurl', {
                                                           rules: [{ required: true, message: $t('pro.EditCreatives.ImageURLMess') }],
                                                        },{initialValue: 'bannerPreview.imageSrc'}]"
                      style="max-width:400px"
                    >
                      <a-select-opt-group
                        v-for="(files,folder) in renderFileList"
                        :key="folder"
                        style="width: 100%;overflow: hidden"
                      >
                        <span slot="label">{{folder}}</span>
                        <a-select-option
                          :key="file.displayPath"
                          v-for="file in files"
                          style="width: 100%;"
                          @click="imageSelect(file)"
                        >{{file.fileName}}</a-select-option>
                      </a-select-opt-group>
                    </a-select>

                    <!-- 图片网络地址 -->
                    <a-input
                      v-show="!imageSelectFromLibrary"
                      type="url"
                      placeholder="https://eg.domain.com/image.png"
                      @blur="targetEvent"
                      style="width: 100%;overflow: hidden"
                      v-decorator="['creative.banners.iurl',  {
                                            rules: [{ required: true, message: $t('pro.EditCreatives.ImageURLMess') }],
                                            },{initialValue: 'bannerPreview.imageSrc'}]"
                    >
                      <a-icon slot="addonAfter" type="link" />
                    </a-input>
                  </a-form-item>

                  <!-- 广告尺寸 -->
                  <a-form-item
                    v-if="false"
                    :label="$t('pro.EditCreatives.CreativeSize')"
                    v-show="!!this.validSrc"
                  >
                    <a-select
                      showSearch
                      :placeholder="$t('pro.EditCreatives.SelectSize')"
                      optionFilterProp="children"
                      @change="imgWHSelect"
                      :filterOption="filterOption"
                      v-decorator="['creative.sizeMatchType',{ initialValue: 'width_height_only' }]"
                    >
                      <a-select-option value="width_height_only">{{$t('pro.EditCreatives.Matchspecified')}}</a-select-option>
                      <a-select-option value="300,250">{{$t('pro.EditCreatives.wh1')}}</a-select-option>
                      <a-select-option value="320,50">{{ $t('pro.EditCreatives.wh2')}}</a-select-option>
                      <a-select-option value="320,480">{{$t('pro.EditCreatives.wh3')}}</a-select-option>
                      <a-select-option value="728,90">{{ $t('pro.EditCreatives.wh4')}}</a-select-option>
                      <a-select-option value="160,600">{{$t('pro.EditCreatives.wh5')}}</a-select-option>
                      <a-select-option value="480,320">{{$t('pro.EditCreatives.wh6')}}</a-select-option>
                      <a-select-option value="300,30">{{ $t('pro.EditCreatives.wh7')}}</a-select-option>
                      <a-select-option value="300,600">{{$t('pro.EditCreatives.wh8')}}</a-select-option>
                      <a-select-option value="970,250">{{$t('pro.EditCreatives.wh9')}}</a-select-option>
                      <a-select-option value="768,1024">{{$t('pro.EditCreatives.wh10')}}</a-select-option>
                    </a-select>
                  </a-form-item>

                 
                  <div
                    class="dsp-form-group"
                    id="IBASize"
                  >
                    <a-form-item :label="$t('pro.Library.Width')">
                      <a-input-number
                        style="width: 100%"
                        :min="0"
                        :precision="2"
                        v-decorator="['creative.banners.width', {rules: [{ required: true, message: $t('pro.createFilterList.message') }]} ]"
                        @change="targetEvent({target: {id:'creative.banners.width', value: $event }})"
                      ></a-input-number>
                    </a-form-item>
                    <a-form-item :label="$t('pro.Library.Height')">
                      <a-input-number
                        style="width: 100%"
                        :min="0"
                        :precision="2"
                        v-decorator="['creative.banners.height', {rules: [{ required: true, message: $t('pro.createFilterList.message') }]} ]"
                        @change="targetEvent({target: {id:'creative.banners.height', value: $event }})"
                      ></a-input-number>
                    </a-form-item>
                  </div>

                  <a-form-item :label="$t('pro.EditCreatives.ContentType')" v-show="false">
                    <a-select
                      showSearch
                      :placeholder="$t('pro.EditCreatives.SelectOption')"
                      optionFilterProp="children"
                      :filterOption="filterOption"
                      v-decorator="['creative.banners.contenttype',{
                                                rules: [{ required: true, message: $t('pro.EditCreatives.ContentTypeMess') }],
                                                initialValue: $t('pro.EditCreatives.ContentTypeMess'),
                                                 }]"
                    >
                      <a-select-option value="html">HTML</a-select-option>

                      <!--<a-select-option value="iframe">iFrame</a-select-option>
                                            <a-select-option value="html">HTML</a-select-option>
                                            <a-select-option value="javascript">Javascript</a-select-option>
                      <a-select-option value="override">Override</a-select-option>-->
                    </a-select>
                  </a-form-item>

                  <!-- [顶级域名] -->
                  <!--<a-form-item :label="$t('pro.EditCreatives.LandingPagTLD')">
                                        <a-input
                                                type="url"
                                                placeholder="domain.com"
                                                v-decorator="['creative.banners.aDomain',{
                                              rules: [{required: true, message: $t('pro.EditCreatives.domainPla')}] }]"
                                        >
                                            <a-icon slot="addonAfter" type="link" />
                                        </a-input>
                  </a-form-item>-->

                  <!-- 点击跳转链接 -->
                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.ClickURL') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.clickUrl')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-input
                      type="url"
                      placeholder="https://eg.domain.com"
                      @blur="targetEvent"
                      v-decorator="['creative.banners.clickUrl',
                      { initialValue: bannerPreview.clickUrl, 
                      rules: [{ required: true, message: $t('pro.createFilterList.message') },  { validator: internetURL }] }]"
                    >
                      <a-icon slot="addonAfter" type="link" />
                    </a-input>
                  </a-form-item>

                  <!-- 广告代码 -->
                  <a-form-item :label="$t('pro.EditCreatives.AdTag')">
                    <a-textarea
                      @blur="targetEvent"
                      @change="tagChange"
                      :rows="8"
                      v-decorator="['creative.banners.htmltemplate',{
                         rules: [{ required: true, message: $t('pro.EditCreatives.TagMess') }], initialValue: previewContent
                     }]"
                    />
                  </a-form-item>

                  <!-- 显示设备设置项 -->
                  <!--<a-form-item :label="$t('pro.EditCreatives.Device')">
                                        <a-checkbox
                                                @change="onChangelyWithDeviceIfa"
                                                :checked="onlyWithDeviceIfa"
                                                v-decorator="['creative.banners.onlyWithDeviceIfa']"
                                        >{{$t('pro.EditCreatives.OnlyWithDevice')}}
                                        </a-checkbox>
                  </a-form-item>-->
                </template>

                <!-- 视频广告 模块-->
                <template v-if="mediaType=='videos'">
                  <div class="dsp-form-group">
                    <a-input v-decorator="['creative.videos.id']" hidden></a-input>
                    <!-- 自动播放 -->
                    <a-form-item :label="$t('pro.EditCreatives.Autoplay')">
                      <a-switch
                        @change="onChangeAutoPlay"
                        :checked="autoPlay"
                        checkedChildren="ON"
                        unCheckedChildren="OFF"
                        v-decorator="['creative.videos.autoPlay']"
                      />
                    </a-form-item>
                    <!-- 声音开关 -->
                    <a-form-item :label="$t('pro.EditCreatives.SoundSwitch')">
                      <a-switch
                        @change="onChangeSoundEnable"
                        :checked="soundEnable"
                        checkedChildren="ON"
                        unCheckedChildren="OFF"
                        v-decorator="['creative.videos.soundEnable']"
                      />
                    </a-form-item>
                  </div>
                  <a-form-item :label="$t('pro.EditCreatives.IABSize')">
                    <a-select
                      showSearch
                      :placeholder="$t('pro.EditCreatives.SelectSize')"
                      optionFilterProp="children"
                      @change="selectIABSize"
                      :filterOption="filterOption"
                      v-decorator="['creative.iabsize']"
                    >
                      <a-select-option value="custom">{{$t('pro.EditCreatives.Custom')}}</a-select-option>
                      <a-select-option value="88,31">{{$t('pro.EditCreatives.IABMicro')}}</a-select-option>
                      <a-select-option value="120,60">{{$t('pro.EditCreatives.IABButton2')}}</a-select-option>
                      <a-select-option value="120,90">{{$t('pro.EditCreatives.IABButton1')}}</a-select-option>
                      <a-select-option value="120,240">{{$t('pro.EditCreatives.IABVerticalBanner')}}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <div class="dsp-form-group" v-if="IBASizeCustomize">
                    <a-form-item :label="$t('pro.Library.Width')">
                      <a-input-number
                        style="width: 100%"
                        :min="0"
                        :precision="2"
                        v-decorator="['creative.videos.width']"
                        @change="targetEvent({target: {id:'creative.videos.width', value: $event }})"
                      ></a-input-number>
                    </a-form-item>
                    <a-form-item :label="$t('pro.Library.Height')">
                      <a-input-number
                        style="width: 100%"
                        :min="0"
                        :precision="2"
                        v-decorator="['creative.videos.height']"
                        @change="targetEvent({target: {id:'creative.videos.height', value: $event }})"
                      ></a-input-number>
                    </a-form-item>
                  </div>
                  <!-- 广告代码 -->
                  <a-form-item :label="$t('pro.EditCreatives.AdTag')">
                    <a-textarea
                      :rows="8"
                      v-decorator="['creative.videos.admBody',
                                          {
                                           rules: [{ required: true, message: $t('pro.EditCreatives.TagMess') }]
                                          }]"
                    />
                  </a-form-item>

                  <!-- 登陆页面TLD [顶级域名] -->
                  <a-form-item :label="$t('pro.EditCreatives.LandingPagTLD')">
                    <a-input
                      type="url"
                      placeholder="https://eg.domain.com"
                      v-decorator="['creative.videos.aDomain']"
                    />
                  </a-form-item>

                  <!-- 显示设备设置项 -->
                  <a-form-item :label="$t('pro.EditCreatives.Device')">
                    <a-checkbox
                      @change="onChangelyWithDeviceIfa"
                      :checked="onlyWithDeviceIfa"
                      v-decorator="['creative.videos.onlyWithDeviceIfa']"
                    >{{$t('pro.EditCreatives.OnlyWithDevice')}}</a-checkbox>
                  </a-form-item>
                </template>

  
                <!-- 视频广告 -->
                <template v-if="mediaType=='bannerVideos'">
                  <!-- 视频来源 -->
                  <a-form-item :label="''">
                    <a-radio-group
                      v-decorator="[
                      'creative.bannerVideos.videoSource',{ initialValue: videoPreview.videoSource ? videoPreview.videoSource : 'video_select_library'},{rules: [{ required: true, message: $t('pro.EditCreatives.VideoURLMess') }]},]"
                      @change="targetEvent"
                    >
                      <a-radio value="video_select_library">{{$t('pro.EditCreatives.VideoLibrary')}}</a-radio>
                      <a-radio value="video_select_url">{{$t('pro.EditCreatives.VideoURL')}}</a-radio>
                    </a-radio-group>
                    <!--本地视频库-->
                    <a-select
                      v-show="videoSelectFromLibrary"
                      :placeholder="$t('pro.EditCreatives.SelectVideo')"
                      @change="videoLibraryChange"
                      class="video-b"
                      v-decorator="['creative.bannerVideos.videolib',{ initialValue: videoPreview.videoSrc }]"
                    >
                      <a-select-opt-group v-for="(files,folder) in renderFileList" :key="folder">
                        <span slot="label">{{folder}}</span>
                        <a-select-option
                          :key="file.displayPath"
                          v-for="file in files"
                        >{{file.fileName}}</a-select-option>
                      </a-select-opt-group>
                    </a-select>
                    <!--视频资源链接-->
                    <a-input
                      v-show="!videoSelectFromLibrary"
                      type="url"
                      placeholder="https://eg.domain.com/video.mp4"
                      @blur="targetEvent"
                      style="width: 100%;"
                      v-decorator="['creative.bannerVideos.videolib',  {
                               rules: [{ required: true, message: $t('pro.EditCreatives.VideoURLMess') }],
                            },{initialValue: videoPreview.videoSrc}]"
                    />
                  </a-form-item>

                  <!-- 视频尺寸下拉选择 -->
                  <!--<a-form-item :label="$t('pro.EditCreatives.CreativeSizeOptions')">
                    <a-select
                      showSearch
                      :placeholder="$t('pro.EditCreatives.SelectSize')"
                      optionFilterProp="children"
                      @change="videoSizeChange"
                      :filterOption="filterOption"
                      v-decorator="['creative.sizeMatchType',{ initialValue: 'width_height_only' }]"
                    >
                      <a-select-option value="none">{{$t('pro.EditCreatives.Matchany')}}</a-select-option>
                      <a-select-option value="width_height_only">{{$t('pro.EditCreatives.Matchspecified')}}</a-select-option>
                      <a-select-option value="Small">{{$t('pro.EditCreatives.wh11')}}</a-select-option>
                      <a-select-option value="Medium">{{$t('pro.EditCreatives.wh12')}}</a-select-option>
                      <a-select-option value="Large">{{$t('pro.EditCreatives.wh13')}}</a-select-option>
                      <a-select-option value="X-Large">{{$t('pro.EditCreatives.wh14')}}</a-select-option>
                    </a-select>
                  </a-form-item>-->

                  <!-- 宽高 -->
                  <div class="dsp-form-group" id="IBASize2" v-if="IBASizeCustomize">
                    <a-form-item :label="$t('pro.Library.Width')">
                      <a-input-number
                        style="width: 100%"
                        :min="0"
                        :precision="2"
                        v-decorator="['creative.bannerVideos.vastVideoWidth', {rules: [{ required: true, message: $t('pro.createFilterList.message') }]} ]"
                        @change="targetEvent({target: {id:'creative.bannerVideos.vastVideoWidth', value: $event }})"
                      ></a-input-number>
                    </a-form-item>
                    <a-form-item :label="$t('pro.Library.Height')">
                      <a-input-number
                        style="width: 100%"
                        :min="0"
                        :precision="2"
                        v-decorator="['creative.bannerVideos.vastVideoHeight', {rules: [{ required: true, message: $t('pro.createFilterList.message') }]} ]"
                        @change="targetEvent({target: {id:'creative.bannerVideos.vastVideoHeight', value: $event }})"
                      ></a-input-number>
                    </a-form-item>
                  </div>

                  <!-- 跳转链接 点击跳转 -->
                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.ClickURL') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.clickUrl')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-input
                            type="url"
                            placeholder="https://eg.domain.com"
                            @blur="targetEvent"
                            v-decorator="['creative.bannerVideos.clickUrl',
                            { initialValue: videoPreview.clickUrl, 
                             rules: [
                                  { required: true, message: $t('pro.createFilterList.message') },
                                  { validator: internetURL }
                              ] 
                              }]"
                    >
                      <a-icon slot="addonAfter" type="link" />
                    </a-input>
                  </a-form-item>

                  <!--比特率-->
                  <!--<a-form-item :label="$t('pro.EditCreatives.Bitrate')">
                    <div style="display: grid;grid-template-columns: 3fr 1fr;">
                      <a-input-number
                        style="width: auto"
                        :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                        v-decorator="['creative.bannerVideos.bitrate',{
                                                        rules: [{
                                                          required: true, message: $t('pro.EditCreatives.BitrateMess')
                                                        }],
                                                      }]"
                      ></a-input-number>
                      <span class="minutes">kbps</span>
                    </div>
                  </a-form-item>-->

                  <!--广域视频类型-->
                  <!--<a-form-item :label="$t('pro.EditCreatives.VastVideoType')">
                    <a-select
                      showSearch
                      :placeholder="$t('pro.EditCreatives.SelectOption')"
                      optionFilterProp="children"
                      @change="selectIABSize"
                      :filterOption="filterOption"
                      v-decorator="['creative.bannerVideos.vastVideoType']"
                    >
                      <a-select-option
                        v-for="VastVideoType in VastVideoTypeArr"
                        :value="VastVideoType.key"
                        :key="VastVideoType.key"
                      >{{ VastVideoType.value }}</a-select-option>
                    </a-select>
                  </a-form-item>-->

                  <!-- 登陆页面TLD [顶级域名] -->
                  <!--<a-form-item :label="$t('pro.EditCreatives.LandingPagTLD')">
                                        <a-input
                                                type="url"
                                                placeholder="https://eg.domain.com"
                                                v-decorator="['creative.bannerVideos.aDomain', {
                    }]"
                                        />
                  </a-form-item>-->

                  <!-- MIME类型 -->
                  <a-form-item :label="$t('pro.EditCreatives.MIMETypes')">
                    <a-select
                      mode="multiple"
                      allowClear
                      :placeholder="$t('pro.EditCreatives.Pleaseselect')"
                      v-decorator="['creative.bannerVideos.mimeType',{
                                                rules: [{ required: true,message:$t('pro.EditCreatives.MIMETypesMess')}]
                                                }
                                                ]"
                      @change="handleChange"
                      @popupScroll="popupScroll"
                    >
                      <a-select-option value="video/mpeg">video/mpeg</a-select-option>
                      <a-select-option value="video/mp4">video/mp4</a-select-option>
                      <a-select-option value="video/x-flv">video/x-flv</a-select-option>
                      <a-select-option value="application/x-shockwave-flash">application/x-shockwave-flash</a-select-option>
                      <a-select-option value="application/javascript">application/javascript</a-select-option>
                      <a-select-option value="video/x-ms-wmv">video/x-ms-wmv</a-select-option>
                      <a-select-option value="video/webm">video/webm</a-select-option>
                    </a-select>
                  </a-form-item>

                  <!-- 线性 -->
                  <a-form-item :label="$t('pro.EditCreatives.Linearity')">
                    <a-select
                      :placeholder="$t('pro.EditCreatives.SelectOption')"
                      @change="videoLinearityChange"
                      v-decorator="['creative.bannerVideos.vastVideoLinerarity', { initialValue: 1 }]"
                    >
                      <a-select-option :value="1">{{$t('pro.EditCreatives.Linearity')}}</a-select-option>
                      <a-select-option :value="2">{{$t('pro.EditCreatives.Nonlinear')}}</a-select-option>
                    </a-select>
                  </a-form-item>

                  <!-- 持续时间 -->
                  <a-form-item :label="$t('pro.EditCreatives.Duration')">
                    <a-input-number
                      v-decorator="['creative.bannerVideos.vastVideoDuration', { initialValue: 15, rules: [{ required: true, message: $t('pro.createFilterList.message') }] }]"
                      :min="0"
                      @change="targetEvent({target: {id:'creative.bannerVideos.vastVideoDuration', value: $event }})"
                    />
                    <span class="minutes" v-text="$t('pro.EditCreatives.second')"></span>
                  </a-form-item>

                  <!-- 视频广告代码 -->
                  <a-form-item :label="$t('pro.EditCreatives.AdTag')">
                    <a-textarea
                      @blur="targetEvent"
                      @change="tagChange"
                      :rows="8"
                      v-decorator="['creative.bannerVideos.vastVideoOutgoingFile', {
                       rules: [{ required: true, message: $t('pro.EditCreatives.TagMess') }]
                    }]"
                    />
                  </a-form-item>
                </template>


                <!-- 原生广告 -->
                <template v-if="mediaType=='nativeAd'">
                  <!-- 标题 -->
                  <a-form-item v-show="false">
                    <a-input v-decorator="['creative.nativeAd.id']" hidden style="display: none"></a-input>
                  </a-form-item>

                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.Headline') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.adTitle')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-input
                      v-decorator="['creative.nativeAd.assetTitle',{
                                             rules: [{ required: true, message: $t('pro.public.home.title') }],
                                            }]"
                      @blur="nativeTarget"
                    />
                  </a-form-item>
                 
                  <!-- 标题图片 -->
                  <a-form-item :label="$t('pro.EditCreatives.Thumbnail')">
                    <a-select
                      :placeholder="$t('pro.EditCreatives.Selectimage')"
                      v-decorator="['creative.nativeAd.smallImageId']"
                      style="max-width:400px"
                    >
                      <a-select-opt-group
                        v-for="(files,folder) in renderFileList"
                        :key="folder"
                        style="width: 100%;overflow: hidden"
                      >
                        <span slot="label">{{folder}}</span>
                        <a-select-option
                          :key="file.id"
                          v-for="file in files"
                          style="width: 100%;"
                          @click="nativeImageSelect(file, 'min')"
                        >{{file.fileName}}</a-select-option>
                      </a-select-opt-group>
                    </a-select>
                  </a-form-item>
                  <!-- 主图 -->
                  <a-form-item :label="$t('pro.EditCreatives.LargeThumbnail')">
                    <a-select
                      :placeholder="$t('pro.EditCreatives.Selectimage')"
                      v-decorator="['creative.nativeAd.largeImageId', {
                                               rules: [{ required: true, message: $t('pro.EditCreatives.ImageURLMess') }],
                                            },{initialValue: 'bannerPreview.imageSrc'}]"
                      style="max-width:400px"
                    >
                      <a-select-opt-group
                        v-for="(files,folder) in renderFileList"
                        :key="folder"
                        style="width: 100%;overflow: hidden"
                      >
                        <span slot="label">{{folder}}</span>
                        <a-select-option
                          :key="file.id"
                          v-for="file in files"
                          style="width: 100%;"
                          @click="nativeImageSelect(file, 'max')"
                        >{{file.fileName}}</a-select-option>
                      </a-select-opt-group>
                    </a-select>
                  </a-form-item>

                   <!-- 赞助文本 -->
                  <a-form-item :label="$t('pro.EditCreatives.SponsoredText')">
                    <a-input
                      v-decorator="['creative.nativeAd.assetDataSponsored',{
                                    rules: [{ required: true, message: $t('pro.public.home.sponsored') }],
                                  }]"
                      @blur="nativeTarget"
                    />
                  </a-form-item>

                  <!-- 跳转网址 -->
                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.ClickURL') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.clickUrl')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-input
                      v-decorator="['creative.nativeAd.clickUrl', {
                                         rules: [
                                                  { required: true, message: $t('pro.EditCreatives.ImageURLMess') },
                                                  { validator: internetURL }
                                             ]
                                        }]"
                      @blur="nativeTarget"
                    >
                      <a-icon slot="addonAfter" type="link" />
                    </a-input>
                  </a-form-item>
                  <!-- 号召性文件 -->
                  <a-form-item :label="$t('pro.EditCreatives.assetDataCtaText')">
                    <a-input v-decorator="['creative.nativeAd.assetDataCtaText']"></a-input>
                  </a-form-item>
                  <!-- 原生评分 -->
                  <a-form-item :label="$t('pro.EditCreatives.assetDataRating')">
                    <a-input v-decorator="['creative.nativeAd.assetDataRating']"></a-input>
                  </a-form-item>
                  <!-- 描述 -->
                  <a-form-item>
                    <span slot="label">
                      {{ $t('pro.EditCreatives.Description') }}&nbsp;
                      <a-tooltip :title="$t('pro.formItem.adtextend')">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                    <a-textarea
                      v-decorator="['creative.nativeAd.assetDataDesc',{
                                             rules: [{ required: true, message: $t('pro.public.home.modalPhlder') }],
                                            }]"
                      @blur="nativeTarget"
                      :autosize="{ minRows: 4, maxRows: 8 }"
                    />
                  </a-form-item>
                </template>


                <!-- 弹出式 -->
                <template v-if="mediaType=='pop_under'">
                  <!-- 网站 -->
                  <a-form-item :label="$t('pro.Library.URL')">
                    <a-input v-decorator="['creative.popunder.id']" hidden></a-input>
                    <a-input v-decorator="['creative.popunder.url']" />
                  </a-form-item>
                  <!-- 显示设备设置项 -->
                  <a-form-item :label="$t('pro.Library.Device')">
                    <a-checkbox
                      @change="onChangelyWithDeviceIfa"
                      :checked="onlyWithDeviceIfa"
                      v-decorator="['creative.popunder.onlyWithDeviceIfa']"
                    >{{$t('pro.EditCreatives.OnlyWithDevice')}}</a-checkbox>
                  </a-form-item>
                </template>

              </div>
            </div>

            <div class="grid-item">
              <div class="grid-item-main" style="width: 100%; height: 100%;position: relative">
                <h4 v-text="$t('pro.EditCreatives.CreativePreview')"></h4>

                <a
                  href="javascript:;"
                  v-if="this.mediaType == 'banners' && this.isAdTag && !!this.validSrc"
                  style="float: right"
                  @click="openImgModal"
                >{{ $t('pro.Library.lookImg')}}</a>
                <!-- 图片加载 -->
                <a-spin
                  style="width: 100%;height: 100%;position: absolute;top: 30%;"
                  :spinning="imgloading"
                  :tip="$t('pro.public.loading')"
                />

                <!-- 视频 -->
                <iframe
                  v-if="this.mediaType != 'nativeAd'"
                  name="iframe2"
                  :srcdoc="getTemplateVAST"
                  frameborder="0"
                  width="100%"
                  height="100%"
                  style="text-align: center;"
                  scrolling="no"
                ></iframe>

                <div v-else id="native-html" v-html="nativeHtml"></div>
              </div>
            </div>

            <!-- Submit Button -->
            <div class="grid-item">
              <a-form-item v-if="!isNotDetailedState">
                <a-button
                  type="primary"
                  html-type="submit"
                  @click="handleSubmit($event,'jump')"
                  v-text="submitText"
                ></a-button>
              </a-form-item>
            </div>
          </a-form>
        </a-spin>
      </div>
    </div>

    <!-- 乱加的 -->
    <a-modal title="悄悄提醒您" v-model="visible" @ok="handleOk">
      <p>温馨提示：您刚刚修改的代码将被覆盖</p>
    </a-modal>

    <modal :config="modalConfig" :title="$t('pro.Library.lookImg')"></modal>
  </div>
</template>

<script>
import { stopKeys } from "@/assets/JSfunction";
import { style_html } from "../../utils/tool";
import { secondTimerFormat } from "../../utils/time";
import { validInternetURL} from '../../utils/validate'
import { getFileManager } from "@/api/file-manager";
import { getAllDataByRule } from "@/api/rule-controller";
import { VastVideoTypeArr } from "@/assets/JSdata/index";
import {
  getCampaignsCreative,
  updateCampaignsCreative,
  addCampaignsCreative
} from "@/api/campaigns-creative";
import { getAllDataCategories } from "@/api/all-categories";
import modal from "../../components/common/custom/ImgVoModal";

const trafficType = ["Desktop", "In App", "Mobile Web"];
export default {
  components: { modal },
  data() {
    return {
      rulesArr: [],
      imgHide: false, //隐藏重新加载按钮
      imgloading: false,
      dealShow: false,
      remoteSource: {},
      form: this.$form.createForm(this),
      creativeTypeDisabled: false,
      onlyWithDeviceIfa: false,
      soundEnable: false,
      autoPlay: false,
      mediaType: "banners",
      trafficType,
      VastVideoTypeArr,
      checkedTrafficType: trafficType,
      checkedConnectionType: "all",
      isNotDetailedState: false,  //判断是否是归档状态 archived = 归档
      IBASizeCustomize: true,
      bannerPreview: {
        size: "",
        width: "" || 200,
        height: "" || 200,
        imageSrc: "",
        imageSource: "",
        clickUrl: "",
        alt: ""
      },
      videoPreview: {
        size: "",
        vastVideoWidth: "" || 200,
        vastVideoHeight: "" || 200,
        duration: "", //持续时间 233
        videoSrc: "",
        videoSource: "",
        type: "",
        clickUrl: ""
      },
      //原生广告
      nativePreview: {
        title: "",
        dataDesc: "",
        sponsor: "",
        amxImgSrc: "",
        minImgsrc: "",
        clickUrl: "",
        isShow: false
      },
      isAdTag: false, //判断是否初始化标签
      // 用户自行修改的广告代码
      tagCustomize: "",
      // 用户已经修改了广告代码,
      // 通过监听AD TAG textarea的change事件赋值
      tagCustomizeChanged: false,
      imageSelectFromLibrary: true,
      videoSelectFromLibrary: true,

      // 若用户有修改代码,是否覆盖用户自定义代码的对话框
      visible: false,
      // 用户决定是否覆盖自己的代码,true 覆盖
      overwriteCustomizeTag: false,
      fileList: {},
      spinning: false, //加载
      fileManagerId: 0,
      nativeFileManagerId: [],
      dayBudget: null,
      campBudget: null,

      templateVAST: "", //广告类型视频源码
      renderFileListObj: {},
      previewContentVideo: "",
      frequencyspecList: {
        text: [],
        key: []
      }, //频率集合

      //查看原图
      modalConfig: {
        visible: false,
        type: "img",
        scrList: []
      }
    };
  },
 
  computed: {
    routes() {
      const routes = [
        {
          path: "/bidder/campaigns",
          breadcrumbName: this.$t("pro.public.header.Campaigns")
        },
        {
          path: "/bidder/viewcreative/campaignid/" + this.campaignId,
          breadcrumbName: this.$t("pro.Creatives.CampaignList")
        },
        {
          path: "second",
          breadcrumbName: this.$t("pro.EditCreatives.Createcreative")
        }
      ];
      return routes;
    },
    campaigns() {
      return this.$store.getters.campaigns;
    },
    creativeId() {
      return this.$route.params.id;
    },
    campaignId() {
      return this.$store.getters.campaigns.id;
    },
    submitText() {
      return this.$route.name == "getCreateCreative"
        ? this.$t("pro.EditCreatives.Savecreative")
        : this.$t("pro.EditCreatives.Createcreative");
    },
    titleText() {
      return this.$route.name == "getCreateCreative"
        ? this.$t("pro.EditCreatives.Editcreative")
        : this.$t("pro.EditCreatives.Createcreative");
    },
    nativeHtml() {
      if (!this.nativePreview.isShow) return;
      let html = ` <a href="${this.nativePreview.clickUrl}" target="_blank"><div class="native-box dark-b-fff">
                                         <img width="100%" src="${this.nativePreview.amxImgSrc}">
                                       <div class="box-title dark-font-666">
                                           ${this.nativePreview.title}
                                       </div>
                                       <div class="box-content dark-font-777">
                                           <div class="thumb display-block"><img src="${this.nativePreview.minImgsrc}"></div>
                                           <div class="description display-block" style="margin-top: 4px;"><span>${this.nativePreview.dataDesc}</span></div>
                                       </div>
                                       <div class="sponsor display-block dark-font-666">
                                           <span>
                                               ${this.nativePreview.sponsor}
                                           </span>
                                       </div>
                                   </div></a>`;
      return html;
    },

    previewContent() {
      if (!this.isAdTag) return;
      // 一.如果修改creative (this.modifyCreative),
      // 则优先使用本地数据(this.bannerPreview/this.videoPreview)的数据
      // 如果本地数据为空,则使用服务器端数据(this.remoteSource)
      // 二.如果是创建新的creative,
      // 则始终使用本地数据
      const bannerPreview = {};
      for (const key in this.bannerPreview) {
        if (this.bannerPreview.hasOwnProperty(key)) {
          bannerPreview[key] = this.bannerPreview[key];
          const size = ["width", "height"];
          // 如果this.bannerPreview的width & height == '';
          // 则将bannerPreview对应的值设置为 0
          bannerPreview[key] =
            size.includes(key) && this.bannerPreview[key] == ""
              ? 0
              : this.bannerPreview[key];
        }
      }
      // 一.如果修改creative:
      if (this.$route.name == "getCreateCreative") {
        if (
          this.mediaType == "banners" &&
          Object.keys(this.remoteSource).length > 0
        ) {
          this.remoteSource.iabsize = this.remoteSource.iabsize || "";
          bannerPreview.size = this.remoteSource.iabsize;
          bannerPreview.width = this.remoteSource.iabsize.split(",")[0];
          bannerPreview.height = this.remoteSource.iabsize.split(",")[1];
          bannerPreview.clickUrl = this.remoteSource.banners.clickUrl;
          bannerPreview.imageUrl = this.remoteSource.banners.iurl;
          if (this.modifyCreative) {
            for (const key in this.bannerPreview) {
              if (this.bannerPreview[key] != "") {
                bannerPreview[key] = this.bannerPreview[key];
              }
            }
          }
        }
      }

      // 二.如果是创建新的creative:
      if (this.$route.name == "addCreateCreative") {
      }

      if (this.mediaType == "banners") {
        let template = `<a href="${
          this.bannerPreview.clickUrl
        }" target="_blank">
    <img ${this.bannerPreview.width ? 'width="' : ""}${
          this.bannerPreview.width
        }${this.bannerPreview.width ? 'px"' : ""} ${
          this.bannerPreview.height ? 'height="' : ""
        }${this.bannerPreview.height}${
          this.bannerPreview.height ? 'px"' : ""
        } src="${this.validSrc}" alt="${this.bannerPreview.alt}">
</a>`;

        /*给页面固定的*/
        let template2 = `<a href="${this.bannerPreview.clickUrl}" target="_blank">
    <img width="100%" src="${this.validSrc}" alt="${this.bannerPreview.alt}">
</a>`;
        if (!!this.validSrc) this.templateVAST = template2;
        else this.templateVAST = "";
        return template;
      }

      if (this.mediaType == "bannerVideos") {
        let domain = this.videoPreview.clickUrl.split("/");
        if (domain[2]) {
          domain = "https://" + domain[2];
        } else {
          domain = ""; //如果url不正确就取空
        }

        //给页面看的
        let templateVideo = `<a href="${
          this.videoPreview.clickUrl
        }" target="_blank"
                            style="display:block;
                            margin:0 auto;border: 1px solid #eee;
                            width:${this.videoPreview.vastVideoWidth}px;height: ${this.videoPreview.vastVideoHeight}px">
                            <video ref="Video" id="Video" ${
                              this.soundEnable ? "" : "muted"
                            } ${
          this.autoPlay ? "autoplay" : ""
        } controls="controls" style="margin:0 auto;display: block;width: 100%;height:100%">
                                    <source src="${
                                      this.validSrc
                                    }" type="video/${
          this.validSrc.split(".")[this.validSrc.split(".").length - 1]
        }"
                         </video></a>`;


        let temp2 = `<?xml version="1.0" encoding="utf-8"?>
                                    <VAST version="2.0">
                                        <Ad id="12345">
                                            <InLine>
                                                <AdSystem version="1.0">SpotXchange</AdSystem>
                                                <AdTitle><![CDATA[Sample VAST]]></AdTitle>
                                                <Impression>${domain}</Impression>
                                                <Description><![CDATA[A sample VAST feed]]></Description>
                                                <Creatives>
                                                    <Creative sequence="1" id="1">
                                                        <Linear>
                                                            <Duration>${this
                                                              .videoPreview
                                                              .duration ||
                                                              "00:00:15"}</Duration>
                                                            <TrackingEvents></TrackingEvents>
                                                            <VideoClicks>
                                                                <ClickThrough><![CDATA[${
                                                                  this
                                                                    .videoPreview
                                                                    .clickUrl
                                                                }]]></ClickThrough>
                                                            </VideoClicks>
                                                            <MediaFiles>
                                                                <MediaFile delivery="progressive" bitrate="${this.form.getFieldValue(
                                                                  "creative.bannerVideos.bitrate"
                                                                ) ||
                                                                  0}" width="${
          this.videoPreview.vastVideoWidth
        }" height="${this.videoPreview.vastVideoHeight}"
                                                                           type="video/${
                                                                             this.validSrc.split(
                                                                               "."
                                                                             )[
                                                                               this.validSrc.split(
                                                                                 "."
                                                                               )
                                                                                 .length -
                                                                                 1
                                                                             ]
                                                                           }"><![CDATA[${
          this.validSrc
        }]]>
                                                                </MediaFile>
                                                            </MediaFiles>
                                                        </Linear>
                                                    </Creative>
                                                </Creatives>
                                            </InLine>
                                        </Ad>
                                    </VAST>`;
        this.templateVAST = templateVideo;
        return style_html(temp2);
      }
    },

    getTemplateVAST() {
      this.previewContent;
      return this.templateVAST;
    },

    // 判断是否时包含有效的资源(图片||视频...)链接,
    // 以决定是否显示预览效果: iframe.srcdoc
    validSrc() {
      const condition1 =
        this.mediaType == "banners" && this.bannerPreview.imageSrc;
      const condition2 =
        this.mediaType == "bannerVideos" && this.videoPreview.videoSrc;
      let condition3 = this.remoteSource.banners
        ? this.remoteSource.banners.iurl
        : this.remoteSource.bannerVideos
        ? this.remoteSource.bannerVideos.videolib
        : "";
      return condition1 || condition2 || condition3;
    },

    // 用户选择文件的文件列表（切换视频广告 & 图片广告时，自动做出相应改变）
    renderFileList() {
      const renderFileList = {};
      for (const key in this.fileList) {
        if (this.fileList.hasOwnProperty(key)) {
          const filesFilter = this.fileList[key].filter(file => {
            return this.mediaType == "banners" || this.mediaType == "nativeAd"
              ? file.fileType.includes("image")
              : !file.fileType.includes("image");
          });
          if (filesFilter.length > 0) {
            renderFileList[key] = filesFilter;
          }
        }
      }
      this.renderFileListObj = renderFileList;
      return renderFileList;
    }
  },
  methods: {
    internetURL(rule, value, callback) {
       if (value) {
            if (validInternetURL(value)) {
              callback();
            } else {
              callback(this.$t('pro.UploadFile.addressMess'));
            }
       } else {
          callback("");
      }
    },
  
    //递归判断图片加载完成
    recursionImgLoad() {
      let a = this.nativeHtml;
      let img = this.$el.querySelector("#native-html .native-box img");
      let imgSrc = img.getAttribute("src");
      console.log(imgSrc);
      console.log("---------");
      if (!!imgSrc) {
        console.log("yes");
        delete this.recursionImgLoad;
      } else {
        console.log("no");
      }
    },
    openImgModal() {
      let img = {
        src: this.validSrc,
        width: this.bannerPreview.width,
        height: this.bannerPreview.height,
        alt: this.bannerPreview.alt
      };
      this.modalConfig.scrList = [img];
      this.modalConfig.visible = true;
    },
    handleDayBudget(value) {
      this.$nextTick(() => {
        this.dayBudget = value;
      });
    },
    handleBudget(value) {
      this.$nextTick(() => {
        this.campBudget = value;
      });
    },
    validateSum(rule, value, callback) {
      if (value) {
        if (value <= this.dayBudget) {
          callback(this.$t("pro.Editcampaigns.lessCampBudget"));
        } else {
          this.form.setFields({
            "creative.dailyBudget": { error: [], value: this.dayBudget }
          });
        }
      }
      callback();
    },
    //判断每日预算是否大于总预算
    validateDailyCap(rule, value, callback) {
      if (value) {
        if (value >= this.campBudget) {
          callback(this.$t("pro.Editcampaigns.lessCampBudget"));
        } else {
          if (value > this.form.getFieldValue("creative.hourlyBudget")) {
            this.form.setFields({
              "creative.hourlyBudget": {
                error: [],
                value: this.form.getFieldValue("creative.hourlyBudget")
              }
            });
          } else {
            this.form.setFields({
              "creative.hourlyBudget": {
                error: [this.$t("pro.Editcampaigns.lessDayBudget")]
              }
            });
          }
        }
      }
      callback();
    },

    //判断小时预算是否大于每日预算
    validateHourlyCap(rule, value, callback) {
      if (value) {
        if (value >= this.dayBudget) {
          callback(this.$t("pro.Editcampaigns.lessDayBudget"));
        }
      }
      callback();
    },

    // {stopKeys} 该方法阻止用户输入除数字以外的其他字符
    stopKeys,

    //显示交易
    onChangeSoundEnable(e) {
      this.soundEnable = e;
    },
    onChangeAutoPlay(e) {
      this.autoPlay = e;
    },
    onChangelyWithDeviceIfa(e) {
      this.onlyWithDeviceIfa = e.target.checked;
    },

    //按钮提交事件
    handleSubmit(e, status) {
      let that = this;
      this.spinning = true;
      e.preventDefault();
      this.form.validateFields((err, values) => {
        try {
          if (!err) {
            //获取当前选中上传类型
            let mediaType = this.mediaType;
            //获取上传对象
            let creative = values.creative;
            //将上传对象中有对象的地方转为json
            Object.keys(creative).forEach(function(key) {
              //如果为上传类型对象
              if (key == mediaType) {
                //获取当前选中上传类型的对象
                let mediaTypeObject = creative[mediaType];
                Object.keys(mediaTypeObject).forEach(function(key) {
                  if (mediaTypeObject[key] instanceof Object) {
                    mediaTypeObject[key] = JSON.stringify(mediaTypeObject[key]);
                  }
                });
              } else {
                if (creative[key] instanceof Object) {
                  creative[key] = JSON.stringify(creative[key]);
                }
              }
            });
            // 设置图片上传类型
            console.log("设置图片上传类型");
            if (creative.sizeMatchType == "width_height_only") {
              creative.iabsize =
                creative[mediaType].width + "," + creative[mediaType].height;
            }
            creative.fileManagerId = this.fileManagerId;
            if (mediaType == "bannerVideos") {
              creative[mediaType].mimeType = JSON.parse(
                creative[mediaType].mimeType
              ).join(",");
            }
            creative.campaignId = that.campaignId;
            let creativeObj = {};
            Object.keys(creative).forEach(keys => {
              if (keys !== mediaType) {
                creativeObj[keys] = creative[keys];
              }
            });
            creativeObj["creativeType"] = creative.type;
            creativeObj["rtbStandardIds"] = creative.rtbStandardIds;
            creativeObj["fileManagerId"] = creative.fileManagerId;

            Object.assign(creative[mediaType], creativeObj);
            let creativeObjE = {};
            Object.keys(creative).forEach(keys => {
              if (
                keys == "campaignId" ||
                keys == "type" ||
                keys == "id" ||
                keys == "rtbStandardIds" ||
                keys == "fileManagerId" ||
                keys == "iabsize"
              ) {
                creativeObjE[keys] = creative[keys];
              }
            });
            creativeObjE[mediaType] = creative[mediaType];
            if (creativeObj["rtbStandardIds"] !== undefined) {
              creativeObjE["rtbStandardIds"] = JSON.parse(
                creativeObj["rtbStandardIds"]
              );
            }
            //判断图是否选择配套宽高
            if (!!creativeObjE.banners) {
              if (
                creativeObjE.banners.sizeMatchType !== "width_height_only"
                // || creativeObjE.banners.sizeMatchType !== "none"
              ) {
                creativeObjE.banners.width = +this.bannerPreview.width;
                creativeObjE.banners.height = +this.bannerPreview.height;
              }
            }

            if (this.$route.name == "getCreateCreative") {
              creativeObjE.id = that.creativeId;
              updateCampaignsCreative(creativeObjE)
                .then(res => {
                  if (res.data.code == "200" && res.data.data) {
                    this.spinning = false;
                    this.$message.success(
                      this.$t("pro.Editcampaigns.operationSuccess")
                    );
                    setTimeout(() => {
                      this.$router.push(
                        "/bidder/viewcreative/campaignid/" + this.campaigns.id
                      );
                      this.spinning = false;
                    }, 1200);
                  }
                })
                .finally(() => {
                  this.spinning = false;
                });
            } else {
              addCampaignsCreative(creativeObjE)
                .then(res => {
                  if (res.data.code == "200" && res.data.data) {
                    this.spinning = false;
                    this.$message
                      .success(this.$t("pro.Editcampaigns.operationSuccess"), 1)
                      .then(() => {
                        if (status == "jump") {
                          this.$router.push(
                            "/bidder/viewcreative/campaignid/" +
                              this.campaigns.id
                          );
                          this.spinning = false;
                        }
                        if (status == "refresh") {
                          this.spinning = false;
                          this.form.resetFields();
                        }
                      });
                  }
                })
                .finally(() => {
                  this.spinning = false;
                });
            }
          } else {
            this.spinning = false;
          }
        } catch (e) {
          console.error(e);
          this.spinning = false;
        }
      });
    },

    //改变广告类型触发的事件
    changeMediaType(value) {
      this.mediaType = value;
      if (value == "banners") {
        this.$nextTick(() => {
          this.$route.name == "getCreateCreative"
            ? (this.remoteSource.banners.iurl = "")
            : (this.bannerPreview.imageSrc = "");
          this.form.setFieldsValue({ "creative.banners.iurl": "" });
          this.form.setFieldsValue({ "creative.banners.htmltemplate": "" });
        });
      } else if (value == "bannerVideos") {
        this.$nextTick(() => {
          this.$route.name == "getCreateCreative"
            ? (this.remoteSource.bannerVideos.videolib = "")
            : (this.videoPreview.videoSrc = "");
          this.form.setFieldsValue({
            "creative.bannerVideo.vastVideoOutgoingFile": ""
          });
          this.form.setFieldsValue({ "creative.bannerVideos.videolib": "" });
        });
      }
    },

    //
    changeMobileDeviceType(checkedList) {
      console.log(checkedList);
    },

    changeTrafficType(checkedList) {
      // Array.isArray(checkedList) TRUE
      this.checkedTrafficType = checkedList;
    },

    changeConnectionType(e) {
      console.log(e.target.value);
      this.checkedConnectionType = e.target.value;
    },

    selectIABSize(value = "") {
      this.openDialog();
      if (!this.tagCustomizeChanged || this.overwriteCustomizeTag) {
        this.overwriteCustomizeTag = false;
        this.tagCustomize = "";
        this.bannerPreview.sizeMatchType = value;
      }
      // 用户自定义宽高
      this.IBASizeCustomize = !(value == "none");
    },
    imgWHSelect(value = "") {
      // 赋值宽高
      let [width, height] = value.split(",");
      if (!!height) {
        this.bannerPreview.width = width;
        this.bannerPreview.height = height;
      } else {
        // 若是为自定义，则将之前的值赋值至文本框111
        this.$nextTick(() => {
          this.form.setFieldsValue({
            "creative.banners.width": this.bannerPreview.width,
            "creative.banners.height": this.bannerPreview.height
          });
        });
      }
      this.form.setFieldsValue({"creative.banners.htmltemplate": this.previewContent});


      // 宽高是否显示
      this.IBASizeCustomize = value == "width_height_only";
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    imageSelect(file = {}) {
        // 展示输入框宽高
        this.IBASizeCustomize = true;
        this.fileManagerId = file.id;
        this.imgloading = true; //开启加载动画
        let imgOv = file.displayPath || "";
        this.openDialog();

        /**
         * 若: 用户未修改代码: ```creative.banners.admBody```
         * 或: 用户修改代码但决定重新覆盖代码
         * 则执行该代码块
         */
        if (!this.tagCustomizeChanged || this.overwriteCustomizeTag) {
          this.bannerPreview.imageSrc = imgOv;
          this.bannerPreview.alt = file.alt;
          this.bannerPreview.clickUrl = file.href;

          this.bannerPreview.width = file.width;
          this.bannerPreview.height = file.height;

          this.$nextTick(() => {
              // 设置点击/宽/高以及使用默认下拉
              this.form.setFieldsValue({
                  "creative.sizeMatchType": "width_height_only",
                  "creative.banners.clickUrl": file.href,
                  "creative.banners.width": +file.width,
                  "creative.banners.height": +file.height,
              });
          });


          this.tagCustomize = "";
          this.overwriteCustomizeTag = false;
        }

        this.isAdTag = true;
        this.form.setFieldsValue({"creative.banners.htmltemplate": this.previewContent});
        if (this.validSrc !== "") {
          //如果有资源加载成功
          setTimeout(() => {
            this.imgloading = false; //关闭加载动画
          }, 1000);
        }
    },

    nativeImageSelect(file = {}, type = "max") {
      this.imgloading = true; //开启加载动画
      let imgOv = file.displayPath || "";
      if (type === "max") {
        this.nativePreview.amxImgSrc = imgOv;
        this.nativeFileManagerId[1] = file.id;
      } else {
        this.nativePreview.minImgsrc = imgOv;
        this.nativeFileManagerId[0] = file.id;
      }
      this.fileManagerId = this.nativeFileManagerId.join(",");
      setTimeout(() => {
        this.imgloading = false;
      }, 1200);
      this.nativePreview.isShow = true;
    },

    popupScroll() {
      console.log("popupScroll");
    },
    //清空指定表单里的值
    formFieldEmpty(params) {
      if (Array.isArray(params)) {
        params.forEach(item => {
          this.form.setFieldsValue({ [item + ""]: "" });
        });
      } else {
        this.form.setFieldsValue({ [params + ""]: "" });
      }
    },

    targetEvent(e) {
        this.isAdTag = true;
        let [target, value] = [e.target.id, e.target.value + ""];
        this.tagCustomize = "";

        /**
         * @mediaType {banner}
         */
        // 点击广告链接的输入框失去焦点
        if (target == "creative.banners.clickUrl") {
          this.bannerPreview.clickUrl = value;
        }

          // 点击视频链接的输入框失去焦点
        if (target == "creative.bannerVideos.clickUrl") {
            this.videoPreview.clickUrl = value
        }

        // 切换图片资源来源(个人仓库 || 超链接)
        if (value.includes("image_select")) {
          if (value === "image_select_library") {
            this.imageSelectFromLibrary = true;
          } else if (value === "image_select_url") {
            this.imageSelectFromLibrary = false;
          }
          this.bannerPreview.imageSource = value;
          this.$route.name == "getCreateCreative"
            ? (this.remoteSource.banners.iurl = "")
            : (this.bannerPreview.imageSrc = "");
          //指定表单清空
          this.formFieldEmpty([
            "creative.banners.iurl",
            "creative.banners.htmltemplate",
            "creative.banners.width",
            "creative.banners.height",
            "creative.banners.clickUrl"
          ]);
          this.bannerPreview.width = "";
          this.bannerPreview.height = "";
          return;
        }

        // 代码文本域失去焦点
        if (target == "creative.banners.htmltemplate") {
          this.$nextTick(() => {
            let html = this.form.getFieldValue("creative.banners.htmltemplate");
            html = style_html(html);
            this.form.setFieldsValue({ "creative.banners.htmltemplate": html });
          });
          if (this.tagCustomizeChanged) {
            this.tagCustomize = value;
          }
        } else if (target == "creative.bannerVideos.vastVideoOutgoingFile") {
          this.$nextTick(() => {
            this.form.setFieldsValue({
              "creative.bannerVideos.vastVideoOutgoingFile": this.previewContent
            });
          });
          this.$nextTick(() => {
            let html = this.form.getFieldValue(
              "creative.bannerVideos.vastVideoOutgoingFile"
            );
            html = style_html(html);
            this.form.setFieldsValue({
              "creative.bannerVideos.vastVideoOutgoingFile": html
            });
          });
        }

        // 用户自定义输入图片广告或者视频广告的宽和高1
        if (target == "creative.banners.width") {
          this.bannerPreview.width = +value;

        }

        if (target == "creative.bannerVideos.vastVideoWidth") {
          this.videoPreview.vastVideoWidth = +value;
        }

        if (target == "creative.banners.height") {
          this.bannerPreview.height = +value;
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    "creative.bannerVideos.vastVideoOutgoingFile": this.previewContent
                });
            });
        }
        if (target == "creative.bannerVideos.vastVideoHeight") {
            this.videoPreview.vastVideoHeight = +value;
        }

        // 切换视频资源来源(个人仓库 || 超链接)
        if (value.includes("video_select")) {
          this.videoSelectFromLibrary =
            value == "video_select_library" ? true : false;
          this.videoPreview.videoSource = value;

          let arr = [
            "creative.bannerVideo.vastVideoOutgoingFile",
            "creative.bannerVideos.videolib",
            "creative.bannerVideos.bitrate",
            "creative.bannerVideos.vastVideoType",
            "creative.bannerVideos.vastVideoOutgoingFile",
            "creative.bannerVideos.vastVideoLinerarity",
            "creative.bannerVideos.vastVideoDuration",
            "creative.bannerVideos.vastVideoWidth",
            "creative.bannerVideos.vastVideoHeight"
          ];
          this.formFieldEmpty(arr);
          this.form.setFieldsValue({ "creative.bannerVideos.mimeType": [] });
          this.$route.name == "getCreateCreative"
            ? (this.remoteSource.bannerVideos.videolib = "")
            : (this.videoPreview.videoSrc = "");
          return;
        }

        // 手动输入视频超链接(选择外部视频资源)
        if (target == "creative.bannerVideos.videolib") {
          this.videoPreview.videoSrc = value;
          this.fileManagerId = 0;
        }

        // 手动输入图片超链接(选择外部图片资源)
        if (target == "creative.banners.iurl") {
          this.imgloading = true; //开启加载动画
          this.bannerPreview.imageSrc = value;
          this.fileManagerId = 0;
          setTimeout(() => {
            this.imgloading = false; //关闭加载动画
          }, 1000);
        }

        //视频持续世界
        if (target == "creative.bannerVideos.vastVideoDuration") {
          this.videoPreview.duration = secondTimerFormat(value);
        }

        //border: 1px solid #000;
        if(target.includes("bannerVideos")) {
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    "creative.bannerVideos.vastVideoOutgoingFile": this.previewContent
                });
            });
        }else {
            this.$nextTick(() => {
                this.form.setFieldsValue({
                    "creative.banners.htmltemplate": this.previewContent
                });
            });
        }
    },

    //原生鼠标离开事件
    nativeTarget(e) {
      let [target, value] = [e.target.id, e.target.value];
      switch (target) {
        case "creative.nativeAd.assetTitle":
          this.nativePreview.title = value;
          break;
        case "creative.nativeAd.assetDataDesc":
          this.nativePreview.dataDesc = value;
          break;
        case "creative.nativeAd.assetDataSponsored":
          this.nativePreview.sponsor = value;
          break;
        case "creative.nativeAd.clickUrl":
          this.nativePreview.clickUrl = value;
          break;
      }
      this.nativePreview.isShow = true;
    },

    tagChange() {
      this.tagCustomizeChanged = true;
    },

    handleOk(e) {
      this.overwriteCustomizeTag = true;
      // 显示对话框
      this.visible = false;
      // 自定义的代码恢复默认状态
      this.tagCustomizeChanged = false;
      this.tagCustomize = "";
    },

    openDialog() {
      if (this.tagCustomizeChanged) {
        this.visible = true;
      }
    },
    /**
     * @视频
     */
    videoSizeChange(value) {
      // 用户自定义宽高
      this.IBASizeCustomize = !(value == "none");

      /*this.videoPreview.size = value;
                this.videoPreview.vastVideoWidth = 200;
                this.videoPreview.vastVideoWidth = 200;*/
      //value == "small" ? "50%" : value == "medium" ? "80%" : "100%";
        console.log(value);
        this.form.setFieldsValue({
        "creative.bannerVideos.vastVideoOutgoingFile": this.previewContent
      });
    },

    videoLibraryChange(value = "") {
      let fileListA;
      //处理后的视频集合
      let fileList = Object.values(this.renderFileListObj).map(i => {
        return i.map(x => {
          let obj = x;
          obj.url = x.displayPath;
          return obj;
        });
      });
      //flat 扁平化 [1,2,[3,4]] => [1,2,3,4]
      fileListA = fileList.flat(Infinity);
      fileListA.forEach(item => {
        if (value == item.url) {
          this.fileManagerId = item.id;
          this.videoPreview.clickUrl = item.href;
        }
      });

      this.tagCustomize = "";
      this.videoPreview.videoSrc = value;
      //获取类型
      let findType = value.split(".");
      this.videoPreview.type = findType[findType.length - 1];
      this.isAdTag = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          "creative.bannerVideos.vastVideoOutgoingFile": this.previewContent
        });
      });
    },

    videoLinearityChange(value) {
      console.log(value);
    },

    //对再编辑返回的广告系列数据做处理
    handleDataProcessing(obj, type) {
      let objcreative = {};
      let objMedia = obj[type];
      if (type == "banners") {
        Object.keys(objMedia).forEach(keys => {
          if (
            keys == "bidEcpm" ||
            keys == "totalBasketValue" ||
            keys == "hourlyBudget" ||
            keys == "dailyBudget" ||
            keys == "deals" ||
            keys == "frequencyCount" ||
            keys == "frequencyExpire" ||
            keys == "frequencySpec" ||
            keys == "sizeMatchType"
          ) {
            objcreative[keys] = objMedia[keys];
          }
        });
      }
      Object.assign(obj, objcreative);
      return obj;
    },

      //当频率为静态则不需要
    selectFrequencyspec(key) {
      this.frequencyspecList.key.filter(item => {
        if (item.name === key) {
          this.$nextTick(() => {
            this.form.setFieldsValue({ "creative.frequencySpec": item.name });
          });
        }
      });
    }
  },
  created() {
    this.routes[1].breadcrumbName = this.campaigns.name;
    this.routes[1].path =
      "/bidder/viewcreative/campaignid/" + this.campaigns.id;
    if (this.routes[1].breadcrumbName === this.routes[0].breadcrumbName) {
      this.routes[1].breadcrumbName += " ";
    }
    if (this.$route.name == "getCreateCreative") {
      this.spinning = !this.spinning;
      this.routes[2].breadcrumbName = this.$t("pro.EditCreatives.Editcreative");
      this.creativeTypeDisabled = true;
      let parameter = "/" + this.creativeId;
      let useId = this.$store.getters.userId;
      getCampaignsCreative(parameter, useId)
        .then(res => {
          this.isAdTag = !!(
            (res.data.data.banners && res.data.data.banners.iurl) ||
            (res.data.data.bannerVideos &&
              res.data.data.bannerVideos.videolib) ||
            false
          );
          //detailedState
            let { detailedState } = res.data.data || {};
            //判断是否归档状态
            this.isNotDetailedState = detailedState == 'archived' ? true : false;



          this.imgloading = true;
          this.form = this.$form.createForm(this, {
            // 把 props 转为对应的值，可用于把 Redux store 中的值读出,可以在此给form赋值
            mapPropsToFields: () => {
              this.spinning = !this.spinning;
              const obj = res.data.data;
              this.remoteSource = obj;
              this.routes[2].breadcrumbName = obj.name;
              if (!obj) return;
              const mediaType = obj.creativeType;
              this.mediaType = mediaType;
              let data = {};
              data.creative = {};
              //原生广告
              data.creative.nativeAd = {};
              //弹出式广告
              data.creative.pop_under = {};
              //横幅视频广告
              data.creative.bannerVideos = {};
              //横幅广告
              data.creative.banners = {};
              this.handleDataProcessing(obj, mediaType);
              this.campBudget = obj.totalBasketValue;
              this.dayBudget = obj.dailyBudget;
              this.fileManagerId = obj.fileManagerId ? obj.fileManagerId : "0";

              /* 原生 */
              if (mediaType == "nativeAd") {
                obj.bidEcpm = obj[mediaType].bidEcpm;
                let ids = obj.fileManagerId || "";
                this.nativeFileManagerId = ids ? ids.split(",") : [];
                console.log(this.nativeFileManagerId);
              }
              /* 视频 */
              if (mediaType == "bannerVideos") {
                obj.bidEcpm = obj[mediaType].bidEcpm;
                obj[mediaType].mimeType = obj[mediaType].mimeType.split(",");
              }

              this.IBASizeCustomize = obj.sizeMatchType == undefined;

              /* 循环给data处理值 */
              for (let [key, value] of Object.entries(obj)) {
                if (value == null) continue;
                if (key == mediaType) {
                  //给Vue里的变量给定回写值
                  this.bannerPreview.width = value.width || 200;
                  this.bannerPreview.height = value.height || 200;
                  /*给vue 变量的原生广告回写 123*/
                  if (mediaType == "nativeAd") {
                    this.nativePreview.isShow = true;
                    this.nativePreview.title = value.assetTitle;
                    this.nativePreview.dataDesc = value.assetDataDesc;
                    this.nativePreview.clickUrl = value.clickUrl;
                    this.nativePreview.sponsor = value.assetDataSponsored;
                    this.nativePreview["minImgsrcId"] = value.smallImageId;
                    this.nativePreview["amxImgSrcId"] = value.largeImageId;
                  }
                  for (let [objKey, objValue] of Object.entries(value)) {
                    if (objValue == null) continue;
                    value = objValue;
                    try {
                      value = JSON.parse(value);
                    } catch (error) {
                      this.spinning = false;
                      value = value;
                    }
                    data.creative[key][objKey] = this.$form.createFormField({
                      value
                    });
                  }
                } else {
                  try {
                    //frequencySpec 只能接受字符串类型 SON.parse 会转number
                    if ("frequencySpec" != key) {
                      value = JSON.parse(value);
                    }
                  } catch (error) {
                    value = value;
                  }
                  data.creative[key] = this.$form.createFormField({ value });
                }
              }

              /* 图片 */
              if (mediaType == "banners") {
                  if (this.fileManagerId == 0) {
                    data.creative.banners.imageSource = this.$form.createFormField(
                      { value: "image_select_url" }
                    );
                    this.imageSelectFromLibrary = false;
                  } else {
                    data.creative.banners.imageSource = this.$form.createFormField(
                      { value: "image_select_library" }
                    );
                    this.imageSelectFromLibrary = true;
                  }

                  this.tagCustomize = data.creative[mediaType].htmltemplate.value;
                  if (data.creative[mediaType].onlyWithDeviceIfa != null) {
                    this.onlyWithDeviceIfa =
                      data.creative[mediaType].onlyWithDeviceIfa.value;
                  }

                  // 赋值文本框中的url
                  this.bannerPreview.clickUrl = data.creative.banners.clickUrl.value;
              }
              /* 视频 */
              if (mediaType == "bannerVideos") {
                this.tagCustomize =
                  data.creative[mediaType].vastVideoOutgoingFile.value;

                if (this.fileManagerId == 0) {
                  data.creative.bannerVideos.videoSource = this.$form.createFormField(
                    { value: "video_select_url" }
                  );
                  this.videoSelectFromLibrary = false;
                } else {
                  data.creative.bannerVideos.videoSource = this.$form.createFormField(
                    { value: "video_select_library" }
                  );
                  this.videoSelectFromLibrary = true;
                }
              }
              return data;
            }
          });
        })
        .catch(error => {
          this.spinning = false;
        });
    }
  },

  beforeMount() {
    getAllDataByRule().then(res => {
      this.rulesArr = res.data.data;
    });
  },

  mounted() {
    getFileManager().then(res => {
        const fileList = {};
        let list = [];
        res.data.data.forEach((folder, index) => {
          if (folder.fileManagers && folder.fileManagers.length > 0) {
            fileList[folder.fileName] = folder.fileManagers;
            list[index] = folder.fileManagers;
          }
        });
        this.fileList = fileList;
        while (list.some(item => Array.isArray(item))) {
          list = [].concat(...list);
        }

        let formUrl = this.form.getFieldValue('creative.banners.iurl')
        list.forEach(item => {
          if (item.id == this.nativePreview.amxImgSrcId) {
            this.nativePreview.amxImgSrc = item.displayPath;
          }
          if (item.id == this.nativePreview.minImgsrcId) {
            this.nativePreview.minImgsrc = item.displayPath;
          }
          if(item.displayPath === formUrl) {
              this.bannerPreview.alt = item.alt;
              this.form.setFieldsValue({
                  "creative.banners.htmltemplate": this.previewContent
              });
          }

      });
    });

    //获取频率列表
    /*getAllDataCategories(6).then(res => {
      let { data } = res || {};
      let arr = data.data || [];

      arr.forEach(item => {
        this.frequencyspecList.text.push(item.name);
        this.frequencyspecList.key.push(item);
      });
    });*/

    //改为前端静态
    this.frequencyspecList.text = [];

    //图片加载提示
    setTimeout(() => {
      this.imgloading = false;
    }, 1600);
  }
};
</script>

<style lang="less" scoped>
h1,
h3 {
  margin-bottom: 0;
}

.minutes {
  text-align: center;
  font-weight: normal;
  padding: 6px 9px;
  font-size: 13px;
  line-height: 1.5;
  background-color: #ecf0f1;
  border: 1px solid #dce4ec;
  color: #999999;
  border-color: #e5e5e5;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}

div.grid-item-main .ant-spin-nested-loading > div.ant-spin-container {
  width: 0;
  height: 0;
}

.ant-form-item {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 10px;
}

.conditions.grid {
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.ant-checkbox-group {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ant-select-selection-selected-value {
  max-width: 597px;
}

@media (min-width: 1000px) {
  .video-b {
    max-width: 400px!important;
  }
}

@media screen and (max-width: 1260px) and (min-width: 992px) {
  .video-b {
    max-width: 500px;
  }
  .ant-checkbox-group {
    grid-template-columns: 1fr;
    > label:nth-child(1) {
      grid-row: 1;
    }
    > label:nth-child(2) {
      grid-row: 2;
    }
    > label:nth-child(3) {
      grid-row: 3;
    }
  }

  #IBASize {
    grid-template-columns: 1fr;
    grid-gap: 0;
    > div:nth-child(1) {
      grid-row: 1;
    }
    > div:nth-child(2) {
      grid-row: 2;
    }
  }

  #IBASize2 {
    grid-template-columns: 1fr;
    grid-gap: 0;
    > div:nth-child(1) {
      grid-row: 1;
    }
    > div:nth-child(2) {
      grid-row: 2;
    }
  }

  .dsp-form-group {
    grid-template-columns: 1fr;
    grid-gap: 0;
    > div:nth-child(1) {
      grid-row: 2;
    }
    > div:nth-child(2) {
      grid-row: 2;
    }
  }
}

@media screen and (max-width: 992px) {
  .video-b {
    max-width: 420px;
  }
  .conditions.grid {
    // grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    .grid-item:nth-child(1) {
      grid-row: 1;
      grid-column: 1;
    }
    .grid-item:nth-child(2) {
      grid-row: 2;
      grid-column: 1;
    }
    .grid-item:nth-child(3) {
      grid-row: 2;
      grid-column: 2;
    }
    .grid-item:nth-child(4) {
      grid-row: 3;
      grid-column: 1;
    }
  }
}

@media screen and (max-width: 768px) {
  .video-b {
    max-width: 660px;
  }
  .conditions.grid {
    // grid-gap: 20px;
    grid-template-columns: 1fr;
    .grid-item {
      grid-column: 1 !important;
    }
    .grid-item:nth-child(1) {
      grid-row: 1;
    }
    .grid-item:nth-child(2) {
      grid-row: 2;
    }
    .grid-item:nth-child(3) {
      grid-row: 3;
    }
    .grid-item:nth-child(4) {
      grid-row: 4;
    }
  }
}

@media screen and (max-width: 500px) {
  .video-b {
    max-width: 320px;
  }
  .ant-checkbox-group {
    grid-template-columns: 1fr;
    > label:nth-child(1) {
      grid-row: 1;
    }
    > label:nth-child(2) {
      grid-row: 2;
    }
    > label:nth-child(3) {
      grid-row: 3;
    }
  }
}

.ant-radio-group {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
</style>
